<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="2000px" height="2000px" style="background:#889cee"  >
        <!-- 圆形  cx cy 圆心的坐标  -->
        <circle cx="40" cy="40" r="40" stroke="black"  stroke-width="2" fill="red"/>
        <!-- fill x,y顶点坐标 -->
        <rect x="0" y="0" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
        <!-- cx cy 圆心位置 rx ry 定义水平半径 垂直半径 -->
        <ellipse cx="460" cy="80" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
        <!-- x y定义线条的开始 x2 y2 定义线条的结束 -->
        <line x1="300" y1="0" x2="500" y2="250" style="stroke:rgb(99,99,99);stroke-width:2"/>
        <!-- 多边形 points 属性定义多边形每个角的 x 和 y 坐标 -->
        <polygon points="500,500 600,210 350,210" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
        <!-- 折线 points 代表点的位置 -->
        <polyline points="0,400 120,400 120,450 200,450 200,600" style="fill:white;stroke:red;stroke-width:2"/>

        <!-- 作业 -->
        <line x1="0" y1="800" x2="300" y2="800" style="stroke:red;stroke-width:2px"/>
        <rect x="0" y="850" width="300" height="160" style="fill:yellow;stroke:blue;stroke-width:3;" />
        <circle cx="150" cy="1200" r="100" stroke="#f86733" style="stroke-width:3"/>
        <text x="0" y="1350" fill="black" style="font-size:50">Hello World</text>
        <circle cx="550" cy="1200" r="30" stroke="#f86733" style="stroke-width:3;fill:yellow"/>
        <!-- q 二次贝塞尔曲线 根据三个点 确定一条曲线  从七点开始  以后都是相对位置 一朵小花 -->
        <path d="M520,1200 q-42.432 -42.432 30  -30q42.432 -42.432 30 30q42.432 42.432 -30  30q-42.432 42.432 -30 -30q-42.432 42.432 30 30q42.432 42.432 30 -30q42.432 -42.432 -30  -30q-42.432 -42.432 -30  30" id="svg_4" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="red" fill="none"/>
        <!-- 一棵小树 -->
        <path d="M520,1100 l 0 -200 l-150 0 l 70 -50 l-65 0 l50 -40 l-50 0 l145 -100l145 100l-50 0l50 40l-65 0l70 50l-140 0 l0 200 z" stroke-width="2.5" stroke="green" fill="green"/>

    </svg>
</body>
</html>
